<template>
	<view class="">
		<fui-table
      v-show="tableData.length"
			class="curr-table"
			ref="tableRef"
			headerBgColor="var(--fui-color-primary)"
			:stripe="true"
			:ellipsis="true"
			stripeColor="#E5ECFF"
			color="#FFFFFF"
			size="28"
			textSize="28"
			:border="false"
			textColor="#333333"
			:horBorder="false"
			:itemList="tableData"
			:header="headerData"
		></fui-table>
    <fui-empty v-show="!tableData.length" src="/static/images/empty/data.png" title="暂无数据" size="24" width="300" height="auto" marginTop="20" color="#999"></fui-empty>
	</view>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue';

const props = defineProps({
	tableData: {
		type: Array,
		default: () => []
	},
	headerData: {
		type: Array
	}
});

const tableRef = ref();
onMounted(() => {
	//必须等组件加载完成后调用组件方法，刷新header数据时需重新执行方法
	tableRef.value && tableRef.value.columnColorMethod(column1NameColor, 'ranking');
	tableRef.value && tableRef.value.columnColorMethod(column3NameColor, 'salesVolume');
});

watch(props, () => {});
const column1NameColor = (value, index) => {
	let color = '#333';
	if (value == '01') {
		color = '#F85542';
	} else if (value == '02') {
		color = '#F97E09';
	} else if (value == '03') {
		color = '#FEC200';
	} else {
		color = '#333333';
	}
	return color;
};

const column3NameColor = (value) => '#2C83FC';
</script>

<style lang="scss" scoped>
.curr-table {
	margin: 0;
	margin-top: 24rpx;
	border-radius: 16rpx;
	width: 100% !important;
}

::v-deep .fui-table__scroll-view {
	width: 100% !important;

	.fui-table--inner {
		width: 100% !important;

		.fui-table--tr .fui-table--td:nth-child(1) {
			width: 20% !important;
		}

		.fui-table--tr .fui-table--td:nth-child(2) {
			width: 45% !important;
		}

		.fui-table--tr .fui-table--td:nth-child(3) {
			width: 35% !important;
		}
	}
}

.fui-empty__wrap {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 80rpx 0;
}
</style>
